<template>
  <a-modal
    :maskClosable="false"
    :title="`登录日志 - ${info && info.account}`"
    :width="650"
    :visible="showModal"
    :confirm-loading="confirmLoading"
    :ok-type="'primary'"
    :closable="false"
    :okText="`好的`"
  >
    <template #footer>
      <a-button type="primary" @click="showModal = false"> 好的 </a-button>
    </template>
    <a-table
      class="table-con"
      :loading="loading"
      :columns="columns"
      :data-source="tabledata"
      :pagination="pagination"
      :scroll="{ y: 500 }"
    >
    </a-table>
  </a-modal>
</template>
<script>
import { userLoginLogs } from '@/api/vendor'
import { tableMixins } from '@/utils/mixins'

export default {
  mixins: [tableMixins],
  name: 'LoginLog',
  props: {
    id: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      showModal: false,
      confirmLoading: false,
      loading: false,
      columns: [
        { dataIndex: 'createTime', title: '登录时间', align: 'center' },
        { dataIndex: 'loginIp', title: '登录IP', align: 'center' },
        { dataIndex: 'loginDevice', title: '登录设备', align: 'center' },
      ],
      tabledata: [],
      info: null,
      vendorId: undefined,
    }
  },
  async created() {
    this.vendorId = Number(this.$route.params.id)
    console.log(typeof this.vendorId)
  },
  methods: {
    onLoad(data) {
      this.info = data
      this.showModal = true
      this.getData()
    },
    search() {
      this.pageNum = 1
      this.getData()
    },
    reset() {
      this.search()
    },
    getData() {
      this.loading = true
      const { rowsNum, pageNum } = this
      userLoginLogs({
        vendorId: this.vendorId,
        userId: this.info.id,
        rowsNum,
        pageNum,
      })
        .then((res) => {
          this.tabledata = res.items
          // this.total = tabledata.rowCount
        })
        .finally(() => {
          this.loading = false
        })
    },
  },
}
</script>
<style lang="less" scoped>
.table-con {
  /deep/ .ant-table-thead > tr > th,
  /deep/ .ant-table-tbody > tr > td {
    padding: 8px;
  }

  /deep/ .ant-table-header {
    margin-bottom: 8px !important;
    overflow: hidden !important;
  }
}
</style>
